.view--product-push{}

.section-product-push--start{
    padding: 20px 0 0;

    figure.inline-graphic{ 
      margin: 2.5em 0; 
      svg{ width: 100%; }
    }

    @include break-min($break-tablet){
      padding: 60px 0 40px;

      .copy-block--triplet{ margin-top: 4.5em; }
      figure.inline-graphic{ 
        margin: 0; 

        svg{ 
          max-width: 453px;
          display: block;
          margin: 0 auto; 
        }
      }
    }
    @include break-min($break-desktop){
      padding: 112px 0 64px;
      
      .copy-block--triplet{ margin-top: 5.8em; }
      .h2{ max-width: 306px; }
    }
}


.section-product-push--experiments{
    background-color:#f4fafe;
    padding: 0 0 20px;

    figure{ margin-bottom: 2em; }

    @include break-max($break-tablet - 1){
      text-align: center;
    }
    @include break-min($break-tablet){
      padding: 0 0 60px;
      figure{
        max-width: 680px;
        margin: 0 auto;
      }
      .col-lg--3{ padding-top: 60px; padding-bottom: 60px; }
    }
    @include break-min($break-desktop){
      padding-bottom:0;
      .grid-container{ height: 830px; }
      .col-lg--3{ @include vertical-align(); }
    }
}

.beaker-graphic{
  overflow: hidden;
  position:relative;

  .droplet{ 
    display: block;
    position: absolute;
    left:50%; top: -10px;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    background: $color-comet;
    border-radius: 50%;

    &--red{
      background: $color-rad-red;
    }
  }
  
  svg{
    width: 100%;

    .ab0{fill:#E0E0EA;}
    .ab1{fill:none;stroke:#E0E0EA;stroke-width:21;stroke-miterlimit:10;}
    .ab2{fill:none;}
    .ab3{}
    .ab4{fill:#FF395E;}
    .ab5{fill:#169CEE;}
    .ab6{}
    .ab7{fill:#555572;}
    .ab8{fill:#E6E7E8; opacity:0.32;}
    .ab9{fill:#3B2B48;}
    .ab10{fill:#140F18;}
    .ab11{fill:#01DB7C;}

    #circles circle{ 
      opacity:0;
      transform: none !important; 
      top: -10%;
      &.velocity-animating{ opacity: 1; }
    }

    #leftActive,
    #rightActive{
      transition: 150ms fill ease;
      fill: #15101a;
    }

    #beakerLeft,
    #beakerRight{
      path{ transition: transform 3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
    }

    .bubbleinnit{
       &--a, &--b, &--c, &--d, &--e{ transition: transform 2s ease-in-out; }
    }

    &.active-beaker--left{
      #leftActive{ fill: #00DB7C !important; }
      #beakerLeft{
        path{ transform: translateY(-26px); }
        .bubbleinnit{
          &--a{ transform: translate(8px,-30px); } 
          &--b{ transform: translateY(-10px); } 
          &--c{ transform: translate(-5px, -22px); } 
          &--d{ transform: translate(10px, -38px); } 
          &--e{ transform: translate(-12px, -30px); } 
        }
      }
    }
    &.active-beaker--right{
      #rightActive{ fill: #00DB7C !important; }
      #beakerRight{
        path{ transform: translateY(-26px); }
        .bubbleinnit{
          &--a{ transform: translateY(-30px); } 
          &--b{ transform: translateY(-20px); } 
          &--c{ transform: translateY(-43px); } 
          &--d{ transform: translateY(-25px); } 
        }
      }
    }


  }
}

.section-product-push--pricing{
  padding: 60px 0;
  overflow: hidden;
  position:relative;
  // height: 935px;
  
  figure{ 
    position:absolute;
    left: 50%; top: 50%;
    height: 935px; 
    width: 840px;
    transform: translate(-50%, -50%);
  }

  @include break-max($break-tablet - 1){
    text-align: center;
    .h2{ max-width: 290px; margin-left: auto; margin-right: auto; }
    figure{}
  }

  @include break-min($break-tablet){
    padding: 180px 0;
    figure{ transform: translate(0, -50%); }
  }

  @include break-min($break-desktop){
    padding:0; 
    .grid-container{ height:935px; }
    .col-lg--4{ @include vertical-align(); }
    .h2{ max-width: 352px; }
    p{ max-width: 340px; }
    figure{ margin-left: -100px; }
  }

}

.phone-rain{
  position: absolute;
  width:100%; height:100%;
  left:0; top:0;

  &:after{
    content: "";
    position: absolute;
    left:0; top:0;
    width: 100%; height: 100%;
    background: white;
    opacity:0.85;
  }

  &__back,
  &__mid,
  &__fore{
    position: absolute;
    width:100%; height:100%;
    left:0; top:0;
  }

  img{
    position: absolute;
    left:0; top:0;
    // width: 0; height:0; 
  }

  @include break-min($break-tablet){
    &:after{ display:none; }
  }
}



